<template>
	<view>
		<view class="send-type">
			<view :class="type_index==index?'pitch':'type-conten'" @click="changType(item.vlaue,index)" v-for="(item,index) in type">
				{{item.name}}
			</view>
		</view>
		<view class="group-list-card">
			<nodata v-if="pinkDataList.length==0"></nodata>
			<view class="" v-if="type[type_index].value==0">
				<view class="list-card" style="height: 200rpx;" v-for="(item,index) in pinkDataList">
					<view class="group-img">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="group-infoname">
						<view class="group-name">
							{{item.name}}
						</view>
						<view class="intorduce">
							群介绍：{{item.brief}}
						</view>
					</view>
					<!-- icon -->
					<view class="icon-info" style="height: 160rpx;width: 20%;">
						<view class="connec-num">
							<uni-icons type="person" size="20"></uni-icons>
							<text>21</text>
						</view>
						<view class="address-num">
							<uni-icons type="location-filled" size="20"></uni-icons>
							<text>11.9km</text>
						</view>
						<view class="colorTheme" style="font-size: 1rem;" @click="joinGroup(item.id)">
							<text>加入群聊</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="type[type_index].value==1">
				<view class="list-card" v-for="(item,index) in pinkDataList" @click="gotoTrends(item.id,item.brief)">
					<view class="group-img">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="group-infoname">
						<view class="group-name">
							{{item.name}}
						</view>
						<view class="intorduce">
							群介绍：{{item.brief}}
						</view>
					</view>
					<!-- icon -->
					<view class="icon-info" >
						<view class="connec-num">
							<uni-icons type="person" size="20"></uni-icons>
							<text>21</text>
						</view>
						<view class="address-num">
							<uni-icons type="location-filled" size="20"></uni-icons>
							<text>11.9km</text>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="type[type_index].value==2">
					<view class="list-card" v-for="(item,index) in pinkDataList" @click="gotoTrends(item.id,item.brief)">
						<view class="group-img">
							<image :src="item.pic" mode=""></image>
						</view>
						<view class="group-infoname">
							<view class="group-name">
								{{item.name}}
							</view>
							<view class="intorduce">
								群介绍：{{item.brief}}
							</view>
						</view>
						<!-- icon -->
						<view class="icon-info">
							<view class="connec-num">
								<uni-icons type="person" size="20"></uni-icons>
								<text>21</text>
							</view>
							<view class="address-num">
								<uni-icons type="location-filled" size="20"></uni-icons>
								<text>11.9km</text>
							</view>
							<view class="colorTheme" >
								<text>申请中</text>
							</view>
						</view>
					</view>
			</view>
			
		</view>
		<view class="fab" @click="natvGoCreate">
			<uni-icons type="plusempty" color="#FFFFFF" size="35"></uni-icons>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				type_index:0,
				isReachBottom:true,
				page:1,
				dataList:[],
				pinkDataList:[],
				type:[{
					value:0,
					name:"附近的群"
				},
				{
					value:1,
					name:"我的群"
				},
				{
					value:2,
					name:"申请中的群"
				}]
			};
		},
		onLoad(){
			this.getGroupList()
		},
		// 触底
		onReachBottom() {
			if(this.isReachBottom){
				this.page = this.page + 1
				this.getGroupList()
			}
		},
		// 下拉
		onPullDownRefresh() {
			this.page = 1
			this.datalist = []
			this.isReachBottom=true;
			this.getGroupList()
		},
		methods:{
			joinGroup(id){
				app.post("ApiLuntan/joincrowd",{cid:id},(res)=>{
					console.log(res)
					if(res.status == 1){
						uni.showToast({
							title:"申请成功"
						})
					}else{
						uni.showToast({
							title:"申请失败",
							icon:"error"
						})
					}
				})
			},
			gotoTrends(id,brief){
				uni.navigateTo({
					url:'../groupTrends/groupTrends?cid='+id+"&brief="+brief
				})
			},
			natvGoCreate(){
				console.log("tiaozhuan")
				uni.navigateTo({
					url:"./../groupPulseCreate/groupPulseCreate"
				})
			},
			getPinkData(){
				this.pinkDataList = [];
				for(let i=0;i<this.dataList.length;i++){
					if(this.dataList[i].status==this.type[this.type_index].value)
					this.pinkDataList.push(this.dataList[i])
				}
			},
			getGroupList(){
				app.get('ApiLuntan/crowdlist', {
					pagenum: this.page,
				},
				(res)=>{
					if(res.status==1){
						uni.stopPullDownRefresh();
						// console.log(data);
						if(res.data.length>0){
							res.data.forEach(item=>{
								this.dataList.push(item)
							})
							this.getPinkData()
						}else{
							this.isReachBottom=false
						}
					}else{
						app.alert('查询出错');
					}
					console.log(res)
				})
			},
			// 切换
			changType(item,index){
				this.type_index = index;
				this.dataType = this.type[index].value;
				this.getPinkData();
			}
		}
	}
</script>

<style lang="less">
	.send-type{
		margin: 30rpx 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.type-conten{
			width: 28%;
			height: 70rpx;
			background-color: #e7e7e7;
			color: #000000;
			font-family: unset;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 70rpx;
			margin: 0 2%;
		}
		.pitch{
			width: 28%;
			height: 70rpx;
			margin: 0 2%;
			border-radius: 70rpx;
			background-color: #994275;
			font-family: unset;
			font-weight: 600;
			color: #FFFFFF;
			display: flex;
			font-weight: 600;
			justify-content: center;
			align-items: center;
		}
	}
	.group-list-card{
		min-height: calc(100vh - 120rpx) ;
		background-color: #FFFFFF;
		.list-card{
			width: 100%;
			height: 180rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #d3d3d3;
			padding: 40rpx 30rpx;
			.group-img{
				width: 15%;
				height: 110rpx;
				background-color: #F0F0F0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.group-infoname{
				width: 62%;
				padding: 0 10rpx;
				height: 110rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.group-name{
					// font-size: 1rem;
					font-weight: 600;
				}
				.intorduce{
					font-size: 0.7rem;
					color: #cecece;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.icon-info{
				width: 18%;
				height: 110rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
				font-size: 0.7rem;
				color: #cecece;
			}
		}
	}
	.fab{
		position: absolute;
		bottom: 5%;
		right: 5%;
		border-radius: 100%;
		box-shadow: 0 0 4rpx 4rpx #C9C9C9;
		width: 100rpx;
		height: 100rpx;
		background-color: #994275;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
